<!-- 能源管理 》 能耗概览 -->

<template>
  <div class="EnergyOverview">
    <TopCount class="EnergyOverview-top" />

    <div class="EnergyOverview-middle">
      <MiddleElec v-if="CORE.MAP.ENERGY_HAS_ELEC" :class="widthClass" />
      <MiddleWater v-if="CORE.MAP.ENERGY_HAS_WATER" :class="widthClass" />
      <MiddleGas v-if="CORE.MAP.ENERGY_HAS_GAS" :class="widthClass" />
      <MiddleTarget :class="widthClass" />
    </div>

    <div class="EnergyOverview-bottom">
      <BottomArea :class="widthClass" />
      <BottomType :class="widthClass" />
      <BottomRank :class="rankClass" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import state from '@admin/views/Energy/Overview/MiddleElec/store/state'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'EnergyOverview',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 宽度样式类
     */
    widthClass() {
      const { DICT: { TYPE } } = state
      switch (TYPE.length) {
        case 1: return 'half'
        case 2: return 'third'
        case 3: return 'quar'
        default: return 'auto'
      }
    },

    /**
     * 排名样式类
     */
    rankClass() {
      const { DICT: { TYPE } } = state
      switch (TYPE.length) {
        case 1: return 'whole'
        case 2: return 'third'
        case 3: return 'half'
        default: return 'auto'
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
